<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
</head>

<body>
    <script src="./lib/jquery.js"></script>
    <script>
        function ajax(options) {
            // 1.创建一个对象
            var xhr = new XMLHttpRequest();
            var params = options.data;
            var pstr = '';
            // 将params（options.data）这个对象遍历
            for (var key in params) {
                var k = key; //表示对象里的健
                var v = params[k]; //相当于params.k 表示对象里 对应健的值
                pstr += k + '=' + v + '$';
            }
            //去掉最后一个字符串"$"
            // indexOf() 在字符串内进行检索。
            if (pstr.length > 0 && (pstr.lastIndexOf === '$') === pstr.length - 1) {
                //substr(start,length) 方法可在字符串中抽取从 start 下标开始的指定数目的字符。
                // start 必需。要抽取的子串的起始下标。必须是数值。如果是负数，那么该参数声明从字符串的尾部开始算起的位置。也就是说，-1 指字符串中最后一个字符，-2 指倒数第二个字符，以此类推。
                pstr = pstr.substr(0, pstr.length - 1);
            }
            if ((options.type = 'get')) {
                // 把请求参数编码后拼接到URL后面
                //encodeURI编码
                options.url += '?' + encodeURI(pstr);
            }
            // 2.请求数据
            xhr.open(options.type, options.url);
            // 3.触发请求
            if ((options.type = 'get')) {
                xhr.send(null);
            } else if ((options.type = 'post')) {
                // post请求需要设置请求头(需要在xhr.open之后，xhr.send之前)
                xhr.setRequestHeader(
                    'content-type',
                    'application/x-www-form-urlencoded'
                );
                // post请求send的数据需要编译
                xhr.send(pstr);
            }
            // 4.监听服务器返回的数据
            xhr.onreadystatechange = function() {
                if (xhr.readyState === 4 && xhr.status === 200) {
                    var ret = xhr.responseText;
                    var obj = JSON.parse(ret);
                    options.success(obj);
                }
            };
        }
        // ajax({
        //     type: 'get',
        //     data: {
        //         id: 1,
        //         bookname: '西游记',
        //     },
        //     url: 'http://www.liulongbin.top:3006/api/getbooks',
        //     success: function(res) {
        //         console.log(res);
        //     },
        // });
        ajax({
            type: 'get',
            data: {
                id: 1,
                bookname: '西游记',
            },
            url: 'http://www.liulongbin.top:3006/api/getbooks',
            success: function(res) {
                console.log(res);
            },
        });
    </script>
</body>

</html>